<template>
    <el-container>
        <el-main class="wrapper">
            <v-breadcrumb v-bind:breadcumb="breadcumb"></v-breadcrumb>
            <section class="panel"
                     :style="{height: mainHeight+'px'}">
                <div class="panel-body">
                    <div class="btn-group" style="margin-bottom: 15px">
                        <el-button @click="list" type="primary" icon="fa fa-refresh"
                                   size="small"> 刷新
                        </el-button>
                    </div>
                    <div id="main" style="width: 100%;height: 650px;"></div>
                </div>
            </section>
        </el-main>
    </el-container>
</template>
<script>
    import {mapGetters} from 'vuex';
    import echarts from 'echarts';
    import vBreadcrumb from '../layout/breadcrumb.vue';
    import {AnalyList} from '../../utils/axios';
    export default {
        components:{vBreadcrumb},
        data(){
            return {
                breadcumb:[{name: "数据分析"},],//当月浏览量统计、当天览量统计、分享、评论
                charts: '',
                visitPv: [],//访问次数
                visitUv: [],//访问人数
                visitUvNew: [],//新用户数
                date:[],//日期
            }
        },
        activated(){
            this.$store.dispatch('setActive', '/chart');
            this.list();
        },
        mounted(){
            // this.$nextTick(function() {
            //     this.drawPie('main')
            // })
        },
        computed: {
            ...mapGetters(['active','mainHeight','loading'])
        },
        methods:{
            drawPie(id){
                this.charts = echarts.init(document.getElementById(id));
                this.charts.setOption({
                    legend: {
                        data:['访问次数','访问人数','新用户数']
                    },
                    title: {
                        text: '数据分析'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.date
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'访问次数',
                            type:'line',
                            stack: '访问次数',
                            data:this.visitPv,
                            // label: {normal: {show: true, position: 'top'}},
                        },
                        {
                            name:'访问人数',
                            type:'line',
                            stack: '访问人数',
                            data:this.visitUv,
                            // label: {normal: {show: true, position: 'top'}},
                        },
                        {
                            name:'新用户数',
                            type:'line',
                            stack: '新用户数',
                            data:this.visitUvNew,
                            // label: {normal: {show: true, position: 'top'}},
                        },
                    ]
                })
            },
            //获取列表
            list(){
                this.$store.dispatch('setLoading', true);
                AnalyList({params: this.search}).then((response)=>{
                    if (response.code) {
                        this.$message.error(response.msg);
                    } else {
                        this.$store.dispatch('setLoading', false);
                        this.visitPv = [];
                        this.visitUv = [];
                        this.visitUvNew = [];
                        this.date = [];
                        response.data.filter((item)=>{
                            this.visitPv.push(item.visit_pv);
                            this.visitUv.push(item.visit_uv);
                            this.visitUvNew.push(item.visit_uv_new);
                            this.date.push(this.moment(item.created_at).format('MM-DD'));
                            this.drawPie('main')
                        })
                    }
                })
            },
        },
    }
</script>